import React, { Component } from 'react'
import './Footer.css'
export default class Footer extends Component {
  render() {
    const { todos, updataTodos, claerTodos } = this.props
    return (
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            // ✨ 全选全不选
            onChange={(e) => {
              if (e.target.checked) {
                updataTodos(true)
              } else {
                updataTodos(false)
              }
            }}
            // ✨ 当数据中的所有数据的isDone都为true时，复选框自动选择，否则，复选框不选择
            checked={
              // 1.判断是否全为true，若全为true,则返回值为true;否则为false
              todos.every((item) => {
                if (item.isDone) return true
                else return false
              })
            } />
        </label>
        <span>
          <span>已完成 {(todos.filter(item => item.isDone)).length}</span> / 全部 {todos.length}
        </span>
        <button
          className="btn btn-danger"
          onClick={claerTodos}
        >清除已完成任务
        </button>
      </div>
    )
  }
}
